<template>
  <div class="statistics-container">
    <h2>数据统计</h2>

    <!-- 统计卡片 -->
    <div class="statistics-cards">
      <el-row :gutter="20" justify="start">
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="stat-card">
              <div class="icon">
                <el-icon :size="40" color="#409EFF"><User /></el-icon>
              </div>
              <div class="content">
                <div class="title">员工总数</div>
                <div class="value">{{ totalEmployees }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="stat-card">
              <div class="icon">
                <el-icon :size="40" color="#67C23A"><OfficeBuilding /></el-icon>
              </div>
              <div class="content">
                <div class="title">部门数量</div>
                <div class="value">{{ totalDepartments }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="stat-card">
              <div class="icon">
                <el-icon :size="40" color="#E6A23C"><Male /></el-icon>
              </div>
              <div class="content">
                <div class="title">男性员工</div>
                <div class="value">{{ maleCount }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="stat-card">
              <div class="icon">
                <el-icon :size="40" color="#F56C6C"><Female /></el-icon>
              </div>
              <div class="content">
                <div class="title">女性员工</div>
                <div class="value">{{ femaleCount }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表区域 -->
    <div class="charts">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card header="职位分布">
            <div ref="jobChart" style="height: 300px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card header="性别分布">
            <div ref="genderChart" style="height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import {
  User,
  OfficeBuilding,
  Male,
  Female
} from '@element-plus/icons-vue'

// 引入统计数据相关的API
import { getstatistics, getstatisticsGender, getEmpTotal, getDeptTotal } from '../services/auth'

const totalEmployees = ref(0)
const totalDepartments = ref(0)
const maleCount = ref(0)
const femaleCount = ref(0)

const jobChart = ref(null)
const genderChart = ref(null)

onMounted(() => {
  fetchStatisticsData()
})

// 获取统计数据
const fetchStatisticsData = async () => {
  try {
    // 并行获取所有统计数据
    const [jobResponse, genderResponse, empTotalResponse, deptTotalResponse] = await Promise.all([
      getstatistics(),
      getstatisticsGender(),
      getEmpTotal(),
      getDeptTotal()
    ])

    // 处理职位分布数据
    if (jobResponse.data.code === 1) {
      initJobChart(jobResponse.data.data)
    }

    // 处理性别分布数据
    if (genderResponse.data.code === 1) {
      initGenderChart(genderResponse.data.data)
    }

    // 设置其他统计数值
    totalEmployees.value = empTotalResponse.data.data || 0
    totalDepartments.value = deptTotalResponse.data.data || 0
    maleCount.value = genderResponse.data.data.find(item => item.name === '男性员工')?.value || 0
    femaleCount.value = genderResponse.data.data.find(item => item.name === '女性员工')?.value || 0

  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 初始化职位分布图
const initJobChart = (data) => {
  const chart = echarts.init(jobChart.value)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      data: data.jobList
    },
    series: [
      {
        name: '职位分布',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: data.dataList.map((count, index) => ({
          value: count,
          name: data.jobList[index]
        }))
      }
    ]
  }
  chart.setOption(option)
}

// 初始化性别分布图
const initGenderChart = (data) => {
  const chart = echarts.init(genderChart.value)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}人 (占比{d}%))'
    },
    series: [
      {
        name: '性别分布',
        type: 'pie',
        radius: ['40%', '60%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}: {c}人 (占比{d}%))'
        },
        labelLine: {
          show: true
        },
        data: data.map(item => ({
          value: item.value,
          name: item.name
        }))
      }
    ]
  }
  chart.setOption(option)
}
</script>

<style scoped>
.statistics-container {
  padding: 20px;
}

.statistics-cards {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
}

.stat-card .icon {
  margin-right: 15px;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background-color: rgba(64, 158, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.stat-card .content .title {
  color: #909399;
  font-size: 14px;
  margin-bottom: 5px;
}

.stat-card .content .value {
  font-size: 24px;
  font-weight: bold;
}
</style>